﻿@model SmallBusinessKit.ViewModels.ItemsViewModel
@{
    ViewBag.Title = "Fabrikan Inc. | Items";
}

<div class="page-header">
    <h1>Items</h1>
</div>

<div class="row">
    <div class="col-md-12">

        <div class="panel panel-default" style="margin-top: -5px;">
            <div class="panel-body">

                <div class="col-md-3">
                    <fieldset>
                        <legend class="hidden-xs hidden-sm">&nbsp;</legend>
                        
                        @Html.Partial("_Treeview", @Model.Categories)

                    </fieldset>
                </div>

                <div class="col-md-6">
                    <fieldset>
                        <legend class="hidden-xs hidden-sm">&nbsp;</legend>
                        <hr class="hidden-md hidden-lg"/>
                        <div id="TargetDiv">
                            @Html.Partial("_Categories", @Model.Categories)
                        </div>

                        <br/>
                        <div class="alert alert-danger" style="display: none">
                            <p>Oops - couldn't retrieve info</p>
                        </div>
                    </fieldset>
                </div>

                <div class="visible-xs visible-sm visible-md shimTop15">&nbsp;</div>

                <div class="col-md-3" style="background: #F9F9FB;">
                    @Html.Partial("_OurCustomersRave")
                </div>

            </div>

        </div>
    </div>
</div>

@section Scripts
{
    @Scripts.Render("~/bundles/jqueryval-ajax")
    @Scripts.Render("~/bundles/treeView")

    <script>
        $(document).ready(function() {
            $('#tree').treed({ openedClass: 'glyphicon-chevron-down', closedClass: 'glyphicon-chevron-right' });

            $('#tree .branch').each(function () {
                var icon = $(this).children('i:first');
                //icon.toggleClass('glyphicon-minus-sign glyphicon-plus-sign');
                icon.toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
                $(this).children().children().toggle();
            });
        });

        function onFailure() {
            $('#oops').fadeIn().delay(2500).fadeOut();
        }
    </script>
}
